﻿<div id="toolbarStartBtn" class="mapOverlayItem"><img src="@Url.Content("Content/images/plus.png")" style="margin-left:6px;margin-top:9px;" alt="plus" /></div>
<!--div container for vertical toolbar-->
<div id="toolbarContainer" style="display:none; position:fixed; width:48px; right:52px; top:100px; z-index:100">
    <div id="first" class="mapOverlayItem toolbarItem" ><p>1</p></div>
    <div id="second" class="mapOverlayItem toolbarItem" ><p>2</p></div>
    <div id="third" class="mapOverlayItem toolbarItem" ><p>3</p></div>
    <div id="fourth" class="mapOverlayItem toolbarItem" ><p>4</p></div>
</div>
    <div id="firstExpansion" class="mapOverlayItem expandedTool">
        @Html.Partial("~/Views/Tools/_FirstTool.cshtml")
    </div>
    <div id="secondExpansion" class="mapOverlayItem expandedTool"><p>Second expanded</p>
            @Html.Partial("~/Views/Tools/_SecondTool.cshtml")
    </div>
    <div id="thirdExpansion" class="mapOverlayItem expandedTool"><p>Third expanded</p></div>
    <div id="fourthExpansion" class="mapOverlayItem expandedTool"><p>Fourth expanded</p></div>


<script type="text/javascript" >
    $(document).ready(function () {
        $("#toolbarStartBtn").click(function () {
            if ($("#toolbarContainer").css("display") == "none") {
                $("#toolbarContainer").show("blind", 100);
            }
            else {
                $(".expandedTool").each(function () {
                    if ($(this).css("display") == "block") {
                        $(this).hide("slide", { direction: "right" }, 90);
                    }
                });
                $("#toolbarContainer").hide("blind", 250);
            }
        });

        $(".toolbarItem").click(function () {
            toggleSelectedToolBarItem($(this));
        });

        $(".mapOverlayItem").mouseover(function () {
            //Except for expandable tool containers, other map overlay items should appear selectable (the deep coloring)
            if (!$(this).hasClass("expandedTool")) {
                $(this).addClass("toolItemHover");
            }
        });

        $(".mapOverlayItem").mouseout(function () {
            $(this).removeClass("toolItemHover");
        });
    })
    function toggleSelectedToolBarItem(toolBarItem) {
        
        //Handle the UI goodness
        $(".toolbarItem").each(function () {
            if ($(this).hasClass("toolItemSelected")) {
                $(this).removeClass("toolItemSelected");
            }
        });
        $(toolBarItem).addClass("toolItemSelected");

        var expandID = $(toolBarItem).attr("id") + "Expansion";
        var expanded = false;
        if ($("#" + expandID).css("display") == "block") { expanded = true; }

        //Hide all options if any are currently expanded
        $(".expandedTool").each(function () {
            if ($(this).css("display") == "block") {
                $(this).hide("slide", { direction: "right" }, 125);
            }
        });

        //Expand (or collapse if already expanded) the options of clicked item
        if (!expanded) {
            $("#" + expandID).show("slide", {direction: "right"}, 250);
        }

    }

    
</script>
